<template>
  <dv-border-box-7 id="right-row-up-chart">
    <div class="chart-tittle"> 防爆间温湿度 </div>
    <div id="rightRowUpChartOne" />
    <div id="rightRowUpChartTwo" />
  </dv-border-box-7>
</template>

<script>
import Axios from "axios";
import * as echarts from "echarts";
export default {
  name: "rightRowUpChart",
  data() {
    return {
      Data: {
        Temperature: "37",
        Humidity: "40",
      },
    };
  },
  methods: {
    async UpdateData() {
      var _this = this;
      var chartDom = document.getElementById("rightRowUpChartOne");
      var myChart = echarts.init(chartDom);
      var option;
      //axios 调用接口
      //await async  之前没加拿不到
         var url = this.$baseUrl + "message/temperature-and-humidity";
       await  Axios.get(url).then((response) => (
            _this.Data=response.data

        ));

      option = {
        series: [
          {
            type: "gauge",
            center: ["50%", "50%"],
            radius: "80%",
            startAngle: 200,
            endAngle: -20,
            min: 0,
            max: 60,
            splitNumber: 12,
            itemStyle: {
              color: "#FFAB91",
            },
            progress: {
              show: true,
              width: 30,
            },
            pointer: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                width: 30,
              },
            },
            axisTick: {
              distance: -45,
              splitNumber: 5,
              lineStyle: {
                width: 2,
                color: "#999",
              },
            },
            splitLine: {
              distance: -52,
              length: 14,
              lineStyle: {
                width: 3,
                color: "#999",
              },
            },
            axisLabel: {
              distance: 10,
              color: "#999",
              fontSize: 10,
            },
            anchor: {
              show: false,
            },
            title: {
              show: false,
            },
            detail: {
              valueAnimation: true,
              width: "60%",
              lineHeight: 40,
              borderRadius: 8,
              offsetCenter: [0, "-15%"],
              fontSize: 15,
              fontWeight: "bolder",
              formatter: "温度:{value} °C",
              color: "auto",
            },
            data: [
              {
                value: this.Data.Temperature,
              },
            ],
          },
        ],
      };

      option && myChart.setOption(option);
      window.onresize = myChart.resize;

      var chartDom = document.getElementById("rightRowUpChartTwo");
      var myChart = echarts.init(chartDom);
      var option1;

      option1 = {
        series: [
          {
            type: "gauge",
            center: ["50%", "60%"],
            radius: "80%",
            startAngle: 200,
            endAngle: -20,
            min: 0,
            max: 60,
            splitNumber: 12,
            itemStyle: {
              color: "#FFAB91",
            },
            progress: {
              show: true,
              width: 30,
              itemStyle: {
                color: "Blue",
              },
            },
            pointer: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                width: 30,
              },
            },
            axisTick: {
              distance: -45,
              splitNumber: 5,
              lineStyle: {
                width: 2,
                color: "#999",
              },
            },
            splitLine: {
              distance: -52,
              length: 14,
              lineStyle: {
                width: 3,
                color: "#999",
              },
            },
            axisLabel: {
              distance: 10,
              color: "#999",
              fontSize: 10,
            },
            anchor: {
              show: false,
            },
            title: {
              show: false,
            },
            detail: {
              valueAnimation: true,
              width: "60%",
              lineHeight: 40,
              borderRadius: 8,
              offsetCenter: [0, "-15%"],
              fontSize: 15,
              fontWeight: "bolder",
              formatter: "湿度:{value} %",
              color: "blue",
            },
            data: [
              {
                value: this.Data.Humidity,
              },
            ],
          },
        ],
      };

      option1 && myChart.setOption(option1);
    },
  },
  mounted() {
    this.UpdateData();
  },
};
</script>

<style lang="less">
#right-row-up-chart {
  width: 100%;
  height: 20%;
  background-color: rgba(6, 30, 93, 0.5);
  border-top: 2px solid rgba(1, 153, 209, 0.5);
  box-sizing: border-box;
  margin: 20px;
.chart-tittle{
 font-size: 20px;
    display: flex;
    font-weight: bold;
    color: white;
    justify-content: center;
    align-items: center;


}
  #rightRowUpChartOne {

  width: 50%;
  height: 100%;
  display: inline-block;
  margin-top: 5%;
}
#rightRowUpChartTwo {
  float: right;
  right: 0;
  width: 50%;
  height: 100%;
  margin-top: 3%;

}
}


</style>
